.tab-content {
  height: calc(100vh - 160px);
  padding: 24px;
  padding-top: 8px;
  overflow: auto;
  .content-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    .inner-box {
      display: flex;
      justify-content: space-between;
      .details-content {
        display: flex;
        gap: 16px;
        .detail-footer {
          display: flex;
          gap: 20px;
          .icon {
            display: flex;
            align-items: center;
            gap: 8px;
          }
          .create {
            display: flex;
            gap: 8px;
          }
          .app-id {
            display: flex;
            align-items: center;
            gap: 4px;
          }
        }
      }
    }
  }
  .detail-card {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    .detail-card-item {
      border: 1px solid rgb(230, 230, 230);
      border-radius: 8px;
      padding: 24px;
      width: calc(50% - 8px);
      .item-detail {
        display: flex;
        flex-direction: column;
        gap: 20px;
        .item-top {
          display: flex;
          justify-content: space-between;
          .title {
            font-size: 20px;
            font-weight: 500;
            line-height: 24px;
          }
          .item-tag {
            display: flex;
            align-items: center;
            >span {
              background-color: rgb(237, 255, 249);
              display: inline-block;
              padding: 0 8px;
              color: rgb(80, 212, 171);
              border-radius: 10px;
              box-sizing: border-box;
              font-size: 12px;
            }
          }
        }
        .item-bottom {
          display: flex;
          gap: 12px;
          .guest-contianer {
            display: flex;
            .guest-title {
              margin-right: 4px;
            }
          }
          .ant-btn {
            display: flex;
            align-items: center;
            margin-left: 0 !important;
            span {
              margin-left: 4px;
              font-size: 12px;
            }
            &:hover,
            &:focus {
              border-color: #d9d9d9;
              color: #000000d9;
            }
          }
        }
      }
    }
  }
}

.font-size-24 {
  font-size: 24px;
}
.details-content {
  flex-grow: 1;
  width: 0;
}
.detail-name {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  .text {
    display: inline-block;
    max-width: calc(100% - 420px);
    font-weight: 700;
    font-size: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .status-tag {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 12px;
    img {
      margin-right: 8px;
    }
  }
  .app-btn {
    position: absolute;
    right: 0;
    .ant-btn {
      margin-left: 16px;
    }
  }
}
.app-desc {
  word-break: break-all;
}
.remarks {
  .left {
    width: 90px;
    color: rgb(113, 117, 127);
  }
  .right {
    margin-top: 8px;
    word-break: break-all;
  }
}
